<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>商品规格</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>

    <style type="text/css">
        body {
            font-size: 14px;

        }

        .tips {
            font-size: 12px;
            color: #a2a2a2;
        }

        /*商品规格选择，有带勾号的*/
        .format {
            padding: 0 10px;
        }

        .format li:after {
            border-radius: 5px;
        }

        .format li.active {
            color: #327afa;
        }

        .format li.active:after {
            border-color: #327afa;
        }

        .format li.active:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-right: 22px solid #327afa;
            border-top: 15px solid transparent;
            bottom: 0;
            right: 0;
        }

        .format li {
            width: 30%;
            float: left;
            text-align: center;
            border-radius: 8px;
            padding: 5px 0;
            margin-bottom: 12px;
        }

        .format li i {
            display: none;
        }

        .format li.active i {
            display: block;
        }

        .format li:nth-of-type(3n+2), .format li:nth-of-type(3n+1) {
            margin-right: 5%;
        }

        .format .aui-iconfont {
            position: absolute;
            color: #fff !important;
            right: -15px;
            bottom: -8px;
            font-size: 12px !important;
        }

        .addAttr {
            padding: 0 10px;
        }

        .addAttr li {
            width: 30%;
            float: left;
            text-align: center;
            border-radius: 8px;
            padding: 5px 0;
        }

        .aui-icon-add {
            color: #000 !important;
        }

        .addMark {
            margin-right: 5px;
        }

        /*自定义可以删除的*/
        .deleIcon:before {
            content: "-";
            color: #fff;
            position: absolute;
            right: -3px;
            top: -5px;
            font-weight: bolder;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #327afa;
            font-size: 18px;
            line-height: 16px;
            text-align: center;
            z-index: 9;
        }

        .customAttr {

        }

        li.customAttr {
            color: #327afa;
        }

        li.customAttr:after {
            border-color: #327afa;
        }

        .pickerToTop {
            position: absolute;
            bottom: 0;
            /*-webkit-transform: translateY(100%);*/
            /*height:50%;*/
            /*overflow-y:auto; */
            /*-webkit-transition:  .5s;
            transition:  .5s;*/
            z-index: 999;
            width: 100%;
            display: none;
        }

        .toTopAnimate {
            display: block;
        }

        .cancel {
            background: #d7e5ff !important;
            border-color: #d7e5ff !important;
            color: #327afa !important;
            width: 50%;
            float: left;
        }

        .confirm {
            width: 50%;
            float: left;
        }
    </style>
</head>
<body>
<div class="contain">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">

            请选择颜色<span class="tips">（必填，最多选20项）</span>
        </li>
        <li class="aui-list-view-cell">
            <ul class="format colorFormat">
                <!--<li class="aui-border active" tapmode onclick="changeCheck(this)">-->
                    <!--<i class="aui-iconfont aui-icon-check"></i>红色-->
                <!--</li>-->
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i>白色-->
                <!--</li>-->
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i>蓝色-->
                <!--</li>-->
                <!--</li>-->
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i>绿色-->
                <!--</li>-->
                <!--<li class="aui-border customAttr">-->
                <!--<span class="deleIcon"  tapmode onclick="deleAttr(this)"></span>红色</li>-->
                <!--</li> -->
            </ul>
            <!--<ul class="addAttr addColor">-->
                <!--<li class="aui-border" data-type="color" onclick="showPicker('color')">-->
                    <!--<span class="addMark">+</span>自定义-->
                <!--</li>-->
                <!--</li>-->
            <!--</ul>-->
        </li>
    </ul>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">

            请选择尺寸<span class="tips">（必填，最多选20项）</span>
        </li>
        <li class="aui-list-view-cell">
            <ul class="format sizeFormat">
                <!--<li class="aui-border active" tapmode onclick="changeCheck(this)">-->
                    <!--<i class="aui-iconfont aui-icon-check"></i><em>S</em>-->
                <!--</li>-->
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i><em>M</em>-->
                <!--</li>-->
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i><em>L</em></li>-->
                <!--</li>-->

                <!--<li class="aui-border customAttr">-->
                <!--<span class="deleIcon"   tapmode onclick="deleAttr(this)"></span>XXL</li>-->
                <!--</li>    -->
            </ul>
            <!--<ul class="addAttr addSize">-->
                <!--<li class="aui-border" data-type="color" onclick="showPicker('size')">-->
                    <!--<span class="addMark">+</span>自定义-->
                <!--</li>-->
                <!--</li>-->
            <!--</ul>-->
        </li>
    </ul>
</div>
<div class="pickerToTop">
    <ul>
        <li>
            <div class="myBtn cancel" tapmode onclick="hidePicker()">取消</div>
            <div class="myBtn  confirm" tapmode onclick="setAttr(this)">添加</div>
        </li>
    </ul>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">
    var UIInput, inputId, inputValue;
    var firstH,//记录第一次自定义时候的高度，因为弹出键盘时候body高度变化了
        proCount = 0,//商品数量
        colors = "", sizes = "", sizesID = "";//颜色和大小属性json
    apiready = function () {
        api.parseTapmode();
        UIInput = api.require('UIInput');
        var goodsId = api.pageParam.goodsId;
        if (goodsId) {
            //存在表示是修改
            $(".sizeFormat").html("");
            $(".colorFormat").html("");
            showData(goodsId);
        }
    }

    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj) {
//        if ($(obj).hasClass("active")) {
//            $(obj).removeClass("active");
//        } else {
//            $(obj).addClass("active");
//        }
        api.toast({
            msg:"暂时不能删除属性"
        })
    }
    function customAttr(type) {
        var placeHolder = "";
        if (type == "color") {
            placeHolder = "请输入自定义颜色";
            $(".myBtn").attr("data-type", "color");
        } else {
            placeHolder = "请输入自定义尺寸";
            $(".myBtn").attr("data-type", "size");
        }
        UIInput.open({
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: 40
            },
            styles: {
                bgColor: '#fff',
                size: 14,
                color: '#000',
                placeholder: {
                    color: '#ccc'
                }
            },
            autoFocus: true,
            maxRows: 1,
            placeholder: placeHolder,
            keyboardType: 'default',
            fixedOn: api.frameName
        }, function (ret, err) {
            if (ret) {
                inputId = ret.id;
            } else {

            }
        });
    }
    // 删除自定义的
    function deleAttr(obj) {
        $(obj).parent().remove();
    }
    // mui遮罩
    var mask = mui.createMask(hidePicker);
    // 显示遮罩
    function showPicker(type) {
        mask.show();
        $(".pickerToTop").addClass("toTopAnimate");
        //t弹出UIInput
        customAttr(type);
        setFrameHeight(1);
    }
    // 关闭遮罩
    function hidePicker() {
        $(".pickerToTop").removeClass("toTopAnimate");
        mask.myclose();
        UIInput.hide({
            id: inputId
        });
        UIInput.closeKeyboard({
            id: inputId
        });
        setFrameHeight(0);
    }
    // 设置属性
    function setAttr(obj) {
        var dataType = $(obj).attr("data-type");
        //获取输入框的值
        UIInput.value({
            id: inputId
        }, function (ret, err) {
            if (ret) {
                if (ret["msg"]) {
                    var html = '<li class="aui-border customAttr"  ><span class="deleIcon"   tapmode onclick="deleAttr(this)"></span><em>';
                    html += ret["msg"];
                    html += '</em></li>';
                    if (dataType == "color") {
                        $(".colorFormat").append(html);
                    } else {
                        $(".sizeFormat").append(html);
                    }
                    hidePicker();
                } else {
                    api.toast({
                        msg: "请输入",
                        duration: 2000
                    })
                }
            }
        });
    }
    //设置当前页面的高度
    function setFrameHeight(h) {
        //设置release_win的页面高度,把页面的确定挤出外面
        var bodyH;
        if (h) {
            // 添加自定义状态，隐藏win的确定
            firstH = $('body').height();
            bodyH = $('body').height() + 55;
        } else {
            bodyH = firstH;
        }
        api.setFrameAttr({
            name: 'releaseFormat_frm',
            rect: {
                x: 0,
                y: 45,
                w: 'auto',
                h: bodyH
            },
            bounces: true,
            bgColor: '#fff',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }
    //接收来自win的sure方法
    function sure() {

        var hasColors = false, hasSize = false, colorLen = 0, sizeLen = 0;
        $(".colorFormat").find("li").each(function () {
            if ($(this).hasClass("active") || $(this).hasClass("customAttr")) {
                hasColors = true;
                colorLen++;
                colors += $(this).text().trim() + ",";
            }
        })

        $(".sizeFormat").find("li").each(function () {
            if ($(this).hasClass("active") || $(this).hasClass("customAttr")) {
                hasSize = true;
                sizeLen++;
                sizes += $(this).text().trim() + ",";
            }
        })
        if (hasColors && hasSize) {
//            proCount = parseInt(colorLen) * parseInt(sizeLen);
            //发送监听
            api.sendEvent({
                name: "releaseFormat",
                extra: {
                    colors: colors,
                    sizes: sizes
//                    proCount: proCount
                }
            })
            closeWin();
        } else if (!hasColors) {
            api.toast({
                msg: "请选择颜色！"
            })
        } else {
            api.toast({
                msg: "请选择尺寸！"
            })
        }
    }


    /*********************修改属性呢*******/
    function showData(goodId) {

        //获取产品规格分类
        showLoading();
        var data = {};
        var url = 'mall/spec/goodsId/' + goodId;
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                //spec1

                var colorData = ret.msg.cat;
                var sizeData = ret.msg.content;

                for (var i = 0; i < colorData.length; i++) {
                    $(".colorFormat").append('<li class="aui-border active" tapmode="" onclick="changeCheck(this)"> <i class="aui-iconfont aui-icon-check"></i>' + colorData[i]['spec1'] + '</li>');
                }
                for (var i = 0; i < sizeData.length; i++) {
                    $(".sizeFormat").append('<li class="aui-border active" data-id="' + sizeData[0][i]['id'] + '" tapmode="" onclick="changeCheck(this)"> <i class="aui-iconfont aui-icon-check"></i>' + sizeData[0][i]['spec2'] + '</li>');
                }

                hideLoading();
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });
    }
</script>
</html>